<!--
 * @Author: seagull 3132177523@qq.com
 * @Date: 2023-12-06 22:19:26
 * @LastEditors: seagull 3132177523@qq.com
 * @LastEditTime: 2023-12-07 12:57:20
 * @FilePath: \culture-applet2\src\pages\index\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script>
export default {
		data() {
			return {
        // 搜索框
      searchValue: '123123',
      //资讯
      cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon:{
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
        //地图
        id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [{
				latitude: 39.909,
				longitude: 116.39742,
				iconPath: '../../../static/location.png'
			}, {
				latitude: 39.90,
				longitude: 116.39,
				iconPath: '../../../static/location.png'
			}]
			}
		},
		methods: {
      // 搜索框
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
        title: 'clear事件，清除值为：' + res.value,
        icon: 'none',
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
        // 资讯
        onClick(e){
				console.log(e)
			},
			actionsClick(text){
				uni.showToast({
					title:text,
					icon:'none'
				})
			}
	}
</script>

<template>
  <view class="container">
    <swiper :show-scrollbar="false">
      <swiper-item class="firstYe">
        <!-- 轮播图 -->
        <commonbanner />
        <!-- 搜索框 -->
        <view>
              <uni-search-bar
                placeholder="绒花"
                disabled="true"
                :radius="100"
                class="searchFor"
              >
              </uni-search-bar>
        </view>
        <!-- 资讯 -->
        <uni-section title="感受非遗" type="line" class="ziXun" style="background-color: red;">
          <uni-card :cover="cover" @click="onClick">
				    <!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
				      <text class="uni-body">这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
			    </uni-card>
		    <!-- </uni-section>
        <uni-section> -->
          <uni-card :cover="cover" @click="onClick">
				    <!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
				      <text class="uni-body">这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
			    </uni-card>
		    <!-- </uni-section>
        <uni-section> -->
          <uni-card :cover="cover" @click="onClick">
				    <!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
				      <text class="uni-body">这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
			    </uni-card>
		    </uni-section>
      </swiper-item>
      <swiper-item class="secondeYe">
        <!-- 搜索框 -->
        <view>
          <uni-search-bar placeholder="绒花" disabled="true" :radius="100" class="searchFor">
          </uni-search-bar>
        </view>
        <!-- 地图 -->
        <view class="map">
          <view class="page-body">
            <view class="page-section page-section-gap">
              <map
                style="width: 100%; height: 300px"
                :latitude="latitude"
                :longitude="longitude"
                :markers="covers"
              >
              </map>
            </view>
          </view>
        </view>
        <!-- 地点列表 -->
        <view class="addressList">
          <uni-section>
            <uni-card title="基础卡片" extra="额外信息>" :thumbnail="avatar" @click="onClick">
              <text class="uni-body"
                >这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text
              >
            </uni-card>
          </uni-section>
          <uni-section>
            <uni-card title="基础卡片" extra="额外信息>" :thumbnail="avatar" @click="onClick">
              <text class="uni-body"
                >这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text
              >
            </uni-card>
          </uni-section>
          <uni-section>
            <uni-card title="基础卡片" extra="额外信息>" :thumbnail="avatar" @click="onClick">
              <text class="uni-body"
                >这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text
              >
            </uni-card>
          </uni-section>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style>
/* // 隐藏滚动条 */
.page {
  height: 100%;
}

.container {
  width: 100%;
  height: 1800px;
  overflow-y:scroll;
  background-color: #A83E36;
}
.fitstYe {
  width: 100%;
  height: 100%;
  /* background-color: ; */
}
.secondeYe {
  width: 100%;
  height: 100%;
  background-color: #55646E;
}

/* 搜索框 */
.searchFor {
  width: 250px;
  height: 200px;
  background-color: green;
}
.searchCard {
    width: 350px;
    height: 200px;
    background-color: red;
}
.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color:#666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
/* 资讯 */
.ziXun {
    z-index: 100;
  background-color: #A83E36;
}
/* 地图 */
.map {
  height: 200px;
}
/* 地点列表 */
.addressList {
  width: 100%;
  height: 1000px;
  background-color: #55646E;

}
</style>
